<template>
	<view>
		<u-navbar title-color="#333" title-bold title-size="36" title="订单" :border-bottom="false"></u-navbar>
		<view class="">
			<u-tabs active-color="#FC3A30" height="88" :list="list" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<view class="or-div">
			<view class="or-item u-p-b-20" v-for="(item,index) in datalist" :key="index">
				<view class="item-top flex flex_sb">
					<view class="flex">
						<image class="i-icon u-m-r-16" v-if="item.serve && item.serve.type==2"
							:src="action + item.serve.icon" mode=""></image>
						<view class="font_16_333 font_weight " v-if="item.serve">
							{{item.serve.name}}
							<!-- 1 在线咨询 2电话咨询 3图文咨询 4预约 -->
						</view>
					</view>
					<view class="zt">
						<!-- case 1 : // 待支付
						                $where['pay_status'] = 10;
						                $where['check'] = 0;
						                break;
						            case 2 : // 待审核
						                $where['pay_status'] = 20;
						                $where['status'] = 10;
						                $where['check'] = 0;
						                break;
						            case 3 : // 待服务
						                $where['pay_status'] = 20;
						                $where['status'] = 10;
						                $where['check'] = 1;
						                break;
						            case 4 : // 待确认
						                $where['pay_status'] = 20;
						                $where['status'] = 10;
						                $where['check'] = 1;
						                $where['lawyer_id'] = ['>',0];
						                break;
						            case 5 : // 待评价
						                $where['pay_status'] = 20;
						                $where['status'] = 20;
						                break;
						            case 6 : // 已完成
						                $where['pay_status'] = 20;
						                $where['status'] = ['in',[20,30]];
						                break; -->
						<span v-if="item.pay_status==10 && item.check==0">待支付</span>
						<span v-if="item.pay_status==20 && item.check==0 && item.status==10">待审核</span>
						<span
							v-if="item.pay_status==20 && item.check==1 && item.status==10 && item.lawyer_id==0">待服务</span>
						<span
							v-if="item.pay_status==20 && item.check==1 && item.status==10 && item.lawyer_id!=0">待确认</span>
						<span v-if="item.pay_status==20 && item.status==20">待评价</span>
						<span class="font_14_999" v-if="item.pay_status==20 && item.status==30">已完成</span>

					</view>
				</view>
				<view class="item-main u-padding-24 ">
					<!-- 预约预约预约预约 -->
					<view class="yuyue-time flex flex_sb" v-if="item.type==4">
						<view class="">
							<!-- 预约服务时间还未到！ -->
							预约时间
						</view>
						<view class="yysj">
							{{item.day}} {{item.start +'~'+item.end}}
						</view>
					</view>
					<view class="" v-if="item.content">
						<span class="font_14_666 font_weight">咨询问题：</span>
						<span class="font_14_333">{{item.content}}</span>
					</view>
					<view class="u-m-t-24" v-if="item.pay_time">
						<span class="font_14_666 font_weight">下单时间：</span>
						<span class="font_14_333">{{item.pay_time}}</span>
					</view>
					<view class="u-m-t-24" v-if="item.order_sn">
						<span class="font_14_666 font_weight">支付单号：</span>
						<span class="font_14_333">{{item.order_sn}}</span>
					</view>
					<view class="u-m-t-14" v-if="item.price">
						<span class="font_14_666 font_weight">购买价格：</span>
						<span class="m-fh">￥</span>
						<span class="m-m">{{item.price}}</span>
						<!-- <span class="m-sj">/60分钟</span> -->
					</view>
					<view class="">
						<view class="" v-if="(item.type==1 || item.type==2 || item.type==3) && item.lawyers.length>0">
							<!--  -->
							<view class="u-m-t-24 flex flex_wrap">
								<span class="font_14_666 font_weight">服务律师：</span>
								<view class="flex u-m-r-10 u-m-b-10" v-for="(item2,index2) in item.lawyers"
									:key="index2" v-if="item2">
									<image class="ls-img" :src="item2.avatar" mode="aspectFill"></image>
									<view class="u-m-l-20">
										{{item2.name}}
									</view>
								</view>
							</view>
						</view>
						<view class="u-m-t-24 flex" v-if="item.type==4">
							<span class="font_14_666 font_weight">服务律师：</span>
							<view class="flex">
								<image class="ls-img" :src="item.lawyer_avatar" mode="aspectFill"></image>
								<view class="u-m-l-20">
									{{item.lawyer_name}}
								</view>
							</view>
						</view>
					</view>

					<!-- 完成,待评价,确认 -->
					<view class="u-m-t-24 flex_only"
						v-if="(item.pay_status==20 && (item.status==20 || item.status==30) && item.gallery) || (item.pay_status==20 && item.check==1 && item.status==10 && item.lawyer_id!=0 && item.gallery)">
						<view class="font_14_666 font_weight">服务成果：</view>
						<view class="flex">
							<image class="fwcg-img " v-for="(item,index) in item.gallery" :key="index" :src="item"
							@click="previewImage(item)"	mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<!-- 已完成没有以下 -->
				<view class="">
					<view class=""
						v-if="(item.pay_status==20 && item.status==30) || (item.pay_status==20 && item.check==0 && item.status==10)">
					</view>
					<view class="or-bottom flex flex_end" v-else>
						<!-- 待支付待支付待支付待支付待支付待支付 -->
						<view class="btn1" v-if="item.pay_status==10 && item.check==0">
							去支付
						</view>
						<!-- 待服务待服务待服务待服务待服务待服务待服务 -->
						<view class="btn2" @click="quxiao(item)"
							v-if="item.pay_status==20 && item.check==1 && item.status==10 && item.lawyer_id==0">
							取消订单
						</view>
						<view class="btn1" v-if="(item.type==1 || item.type==3 || item.type==4) && item.status==10" @click="lsId = item.lawyer_id,lianxils(item)">
							联系律师
						</view>
						<view class="btn1" v-if="item.type==2 && item.status==10" @click="lsId = item.lawyer_id,hqdianhua()">
							联系律师
						</view>
						<view class="btn1"
							v-if="(item.type==2 || item.type==3) && item.is_only==0 && item.lawyers.length>0"
							@click="xzls(item)">
							选择律师
						</view>
						<!-- 待确认待确认待确认待确认待确认待确认 -->
						<view class="btn1" @click="wancheng(item)"
							v-if="item.pay_status==20 && item.check==1 && item.status==10 && item.lawyer_id!=0">
							确认完成
						</view>
						<!-- 待评价待评价待评价待评价待评价待评价待评价 -->
						<view class="btn1" @click="pingjia(item)" v-if="item.pay_status==20 && item.status==20">
							去评价
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-popup v-model="wcshow" mode="center" border-radius="32">
			<view class="popupmd text_center">
				<view class="font_16_333 font_weight">
					本次服务完毕
				</view>
				<view class="font_12_666 u-m-t-20">
					感谢您的配合！
				</view>
				<view class="p-bd u-m-t-50 flex flex_sb">
					<view class="p-btn1" @click="tolslist">
						更换律师
					</view>
					<view class="p-btn2" @click="hqdianhua">
						获取律师电话
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="xzshow" mode="center" border-radius="32">
			<view class="popupmd popupmd2">
				<view class="ls-div flex flex_sb u-p-t-20" v-for="(item,index) in xzlvshiList.lawyers" :key="index"
					v-if="item" @click="xzlvshiId=item.id">
					<view class="flex ">
						<image class="headimg" :src="item.avatar" mode="aspectFill"></image>
						<view class="font_14_333 font_weight u-m-l-20">
							{{item.name}}
						</view>
					</view>
					<view>
						<u-icon v-if="xzlvshiId==item.id" name="checkbox-mark" color="#FA2D2D" size="28"></u-icon>
					</view>
				</view>
				<view class="p-bd u-m-t-50 flex flex_cen">
					<view class="p-btn2" @click="xuanzelvshi">
						确定
					</view>

				</view>
			</view>
		</u-popup>
		<u-popup v-model="lxshow" mode="center" border-radius="32">
			<view class="popupmd text_center">
				<!-- <view class="font_16_333 font_weight">
					律师未响应
				</view>
				<view class="font_12_666 u-m-t-20">
					您可以选择更换律师或获取律师电话
				</view> -->
				<view class="p-bd u-m-t-50 flex flex_cel">
					<!-- <view class="p-btn1">
						更换律师
					</view> -->
					<view class="p-btn2" @click="hqdianhua">
						获取律师电话
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="dhshow" mode="center" border-radius="32">
			<view class="popupmd popupmd2">
				<view class="ls-div flex">
					<image class="headimg" :src="lvshiInfo.avatar" mode="aspectFill"></image>
					<view class="u-m-l-20">
						<view class="flex">
							<view class="font_14_333 font_weight">
								{{lvshiInfo.name}}
							</view>
							<view class="flex" v-if="lvshiInfo.province">
								<image class="u-m-l-8 h23" src="../../static/img/home/h23.png" mode=""></image>
								<view class="font_10_333 u-m-l-8">
									{{lvshiInfo.province}}
								</view>
							</view>
							<view class="flex u-m-l-16 ">
								<image class="h24" src="../../static/img/home/h24.png" mode=""></image>
								<view class="pf-t">{{lvshiInfo.mark}}</view>
							</view>
						</view>
						<view class="u-m-t-14 font_10_666">
							执业证号：{{lvshiInfo.license_num}}
						</view>
					</view>

				</view>
				<view class="font_16_333 font_weight text_center u-m-t-26 flex">
					联系电话：{{lvshiInfo.mobile}}
					<image class="fz-icon" src="../../static/img/mine/fz-icon.png" mode=""
						@click="copy(lvshiInfo.mobile)"></image>
				</view>

				<view class="p-bd u-m-t-50 flex flex_cen">
					<view class="p-btn2" @click="dhshow=false">
						确定
					</view>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import TIM from '@/TXIM/static/IM-SDK/tim-wx.js'
	// let options = {
	// 	SDKAppID: 1600049908 // 接入时需要将0替换为您的即时通信应用的 SDKAppID
	// };
	// let chat = TIM.create(options); // SDK 实例通常用 chat 表示
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待服务',
				}, {
					name: '待确认',
				}, {
					name: '待评价',
				}, {
					name: '已完成',
				}],
				current: 0,
				wcshow: false,
				dhshow: false,
				lxshow: false,
				xzshow: false,
				datalist: [],
				status: '', //0全部、1待支付、2待审核、3待服务、4待确认、5待评价、6已完成
				xzlvshiId: null,
				xzlvshiList: [],
				lsId: '',
				lvshiInfo: [],
				action: '',
				total: 0,
				pageNum: 1,
				pageSize: 10,
				
				myImId:''
			}
		},
		onLoad(e) {
			this.action = this.$config.imgUrl
			this.current = e.type

			if (this.current == 0) {
				this.status = 0
			} else if (this.current == 1) {
				this.status = 1
			} else if (this.current == 2) {
				this.status = 4
			} else if (this.current == 3) {
				this.status = 3
			} else if (this.current == 4) {
				this.status = 5
			} else if (this.current == 5) {
				this.status = 6
			}
			this.getlist()
			this.getInfo()
		},
		onReachBottom() {
			if (this.pageNum * this.pageSize > this.total) {
				// uni.hideNavigationBarLoading();
			} else {
				this.pageNum++;
				this.getlist()
			}
		},
		methods: {
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			// 个人信息
			getInfo() {
				this.$api({
					url: '/getUserInfo',
					method: 'get',
					data: {
						token: uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						
						this.myImId = res.data.im_id
						
						this.$api({
							url: '/user/getImUserSign',
							method: 'post',
							data: {
								token: uni.getStorageSync("token"),
								user_id: res.data.id
							},
						}).then(res => {
							if (res.code == 1) {
								this.tim.login({
									userID: res.data.userId, //登录时的用户ID
									userSig: res.data.userSign
								}).then(function(imResponse) {
									console.log("登录结果", imResponse)
								})
							}
						})
					}
				})
			},

			lianxils(e) {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: e.lawyer_id
					},
				}).then(res => {
					if (res.code == 1) {
						let promise = {
							conversationID: 'C2C'+res.data.im_id,
							userProfile: {
								nick: res.data.name,
								avatar: res.data.avatar,
								userID: res.data.im_id,
							}
						}
						uni.$on('send', () => {
							uni.$emit("conversationData", promise);
						})
						uni.navigateTo({
							url: '/TXIM/pages/chat/chat'
						})
					}
				})
				
			},
			tolslist() {
				uni.navigateTo({
					url: "/pages/lawyer/lawyer"
				})
			},
			xzls(e) {
				this.xzshow = true
				this.xzlvshiList = e

			},
			xuanzelvshi() {
				if (!this.xzlvshiId) {
					uni.showToast({
						title: "请选择律师",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/user/choose_lawyer',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						id: this.xzlvshiList.id,
						lawyer_id: this.xzlvshiId
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "选择成功",
							icon: "none"
						});
						this.pageNum = 1
						this.xzshow = false
						this.getlist()
					}
				})
			},
			getlist() {
				this.$api({
					url: '/user/orders',
					method: 'get',
					data: {
						page: this.pageNum,
						limit: this.pageSize,
						token: uni.getStorageSync("token"),
						status: this.status //0全部、1待支付、2待审核、3待服务、4待确认、5待评价、6已完成
					},
				}).then(res => {
					if (res.code == 1) {
						// this.datalist = res.data.data

						this.total = res.data.total
						let data = res.data.data
						if (this.pageNum == 1) {
							this.datalist = data
						} else {
							this.datalist = [...this.datalist, ...data]
						}
					}
				})
			},
			quxiao(e) {
				let that = this
				let tishi = '确认取消吗'

				uni.showModal({
					title: '提示',
					content: tishi,
					success: function(res) {
						if (res.confirm) {
							that.$api({
								url: '/user/cancel_order',
								method: 'post',
								data: {
									token: uni.getStorageSync("token"),
									id: e.id
								},
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: "取消成功",
										icon: "none"
									});
									that.pageNum = 1
									that.getlist()
								}
							})


						}
					}
				});

			},
			wancheng(e) {


				let that = this
				let tishi = '确认完成吗'

				uni.showModal({
					title: '提示',
					content: tishi,
					success: function(res) {
						if (res.confirm) {
							that.lsId = e.lawyer_id


							that.$api({
								url: '/user/sure_order',
								method: 'post',
								data: {
									token: uni.getStorageSync("token"),
									id: e.id
								},
							}).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: "确认完成成功",
										icon: "none"
									});
									that.pageNum = 1
									that.getlist()
									that.wcshow = true
									
									
									
									that.$api({
										url: '/lawyer/detail',
										method: 'get',
										data: {
											token: uni.getStorageSync("token"),
											lawyer_id: e.lawyer_id
										},
									}).then(res2 => {
										if (res2.code == 1) {
											that.$api({
												url: '/user/deleteContact',
												method: 'post',
												data: {
													token: uni.getStorageSync("token"),
													// id: e.id,
													from_account:that.myImId,
													to_account:res2.data.im_id
												},
											})
										}
									})
									
									
									
									
									
								}
							})


						}
					}
				});

			},
			lvdetail() {
				this.$api({
					url: '/lawyer/detail',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						lawyer_id: this.lsId
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvshiInfo = res.data

						this.wcshow = false
						this.dhshow = true
					}
				})
			},
			hqdianhua() {

				this.lvdetail()

			},
			change(index) {
				this.pageNum = 1
				this.current = index;
				if (this.current == 0) {
					this.status = 0
				} else if (this.current == 1) {
					this.status = 1
				} else if (this.current == 2) {
					this.status = 4
				} else if (this.current == 3) {
					this.status = 3
				} else if (this.current == 4) {
					this.status = 5
				} else if (this.current == 5) {
					this.status = 6
				}
				this.getlist()
			},
			pingjia(e) {
				uni.navigateTo({
					url: "/subPackageA/pages/lawyerVersion/staging/pingjia?id=" + e.id + "&type=1"
				})
			},
			copy(e) {
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							icon: 'none',
							title: '复制成功',
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.popupmd {
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient(180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;

		.fz-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}

		&2 {
			padding: 48rpx;
		}

		.p-bd {
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;

			.p-btn1 {
				width: 248rpx;
				height: 64rpx;
				background: #FFFFFF;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				border: 2rpx solid #D6D6D6;

				color: #9695A3;
			}

			.p-btn2 {
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}

		.ls-div {
			position: relative;
			border-bottom: 1px #ECE4D9 dashed;
			padding-bottom: 24rpx;

			.headimg {
				height: 84rpx;
				width: 68rpx;
				border-radius: 8rpx;
				background: #eee;
			}

			.h23 {
				width: 24rpx;
				height: 20rpx;
			}

			.h24 {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			.pf-t {
				font-size: 20rpx;
				color: #FD8643;
			}
		}
	}

	.or-div {
		padding: 32rpx;

		.or-item {
			width: 686rpx;
			// height: 568rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 32rpx;

			.item-top {
				padding: 16rpx 24rpx;
				border-bottom: 2rpx solid #F1F1F1;

				.i-icon {
					width: 48rpx;
					height: 48rpx;
				}

				.zt {
					font-weight: 600;
					font-size: 28rpx;
					color: #FC3A30;
				}
			}

			.item-main {
				.fwcg-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 16rpx;
					margin-right: 4rpx;
				}

				.yuyue-time {
					width: 638rpx;
					height: 72rpx;
					background: #FFF4F4;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					padding: 0 24rpx;
					margin-bottom: 20rpx;

					.yysj {
						font-weight: bold;
						font-size: 24rpx;
						color: #FC3A30;
					}
				}

				.m-fh {
					font-weight: bold;
					font-size: 32rpx;
					color: #FC3A30;
				}

				.m-m {
					font-weight: bold;
					font-size: 44rpx;
					color: #FC3A30;
				}

				.m-sj {
					font-size: 24rpx;

				}

				.ls-img {
					width: 64rpx;
					height: 80rpx;
					border-radius: 4rpx;
					background-color: #eee;
				}
			}

			.or-bottom {
				height: 112rpx;
				border-top: 2rpx solid #F1F1F1;
				padding-right: 24rpx;

				.btn1 {
					width: 160rpx;
					height: 64rpx;
					background: linear-gradient(180deg, #FA2D2D 0%, #F40000 100%);
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}

				.btn2 {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					border: 2rpx solid #ADADAD;
					font-size: 28rpx;
					color: #666666;
					line-height: 64rpx;
					text-align: center;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>